<template>
	<div class="cateList">
		<el-card shadow="hover">
			<div class="cate-list mb15">
				<el-form :inline="true" :model="searchForm" label-width="40px" class="demo-form-inline">
					<el-row>
						<el-col :span="10">
							<el-form-item label="状态">
								<el-radio-group v-model="searchForm.status">
									<el-radio-button :label="-1">全部</el-radio-button>
									<el-radio-button :label="1">已启用</el-radio-button>
									<el-radio-button :label="0">已禁用</el-radio-button>
								</el-radio-group>
								<el-button type="primary" @click="init" style="margin-left: 10px">搜索</el-button>
							</el-form-item>
						</el-col>
						<el-col :span="14" style="text-align: right">
							<el-button type="success" @click="toAdd">新增分类</el-button>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-tabs v-model="cateType" @tab-click="handleClicTab">
				<el-tab-pane label="自定义分类" name="1"></el-tab-pane>
				<el-tab-pane label="标准分类" name="2"></el-tab-pane>
			</el-tabs>
			<el-table
				:data="tableData"
				style="width: 100%; margin-bottom: 20px"
				row-key="id"
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
				v-loading="loading"
			>
				<el-table-column label="级别" align="left" width="100">
					<template #default="scope">
						<span>{{ levelFormat(scope.row.level) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="分类名称" width="120"></el-table-column>

				<el-table-column label="图标" width="80">
					<template #default="scope">
						<Img :src="scope.row.icon" style="width: 40px; height: 40px"></Img>
					</template>
				</el-table-column>
				<el-table-column prop="categoryDesc" label="分类描述" align="center"></el-table-column>
				<el-table-column prop="score" label="排序" width="80"></el-table-column>
				<el-table-column label="状态" width="80">
					<template #default="scope">
						<el-switch
							v-model="scope.row.showStatus"
							:active-value="1"
							:inactive-value="0"
							active-color="#13ce66"
							inactive-color="#ff4949"
							@change="changeStatus(scope.row)"
						></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100">
					<template #default="scope">
						<el-button text @click="toEdit(scope.row)" type="primary">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<AddDialog v-model="addDialogVisible" :isAdd="isAdd" :itemInfo="itemInfo" :cateType="Number(cateType)" @refresh="init" />
	</div>
</template>
<script setup name="Cate">
import AddDialog from './AddDialog.vue';
import { useInit, useAdd, useEdit } from './hook';

const { init, changeStatus, levelFormat, handleClicTab, loading, tableData, cateType, searchForm } = useInit();
const { toAdd, addDialogVisible, isAdd } = useAdd();
const { toEdit, itemInfo } = useEdit({ addDialogVisible, isAdd });

onMounted(init);
</script>
<style lang="scss" scoped></style>
